---
title: "<SignUp />"
---

A component that renders a sign-up page with various customization options.

<div className="stack-white-image-showcase stack-350h">
  <img src="/imgs/sign-up.png" alt="SignUp" />
</div>

For more information, please refer to the [custom pages guide](../customization/custom-pages).

## Props

<PropTable
  props={[
    {
      name: "fullPage",
      type: "boolean",
      description: "If true, renders the sign-up page in full-page mode.",
      optional: true,
      default: "false"
    },
    {
      name: "automaticRedirect",
      type: "boolean",
      description: "If true, redirect to afterSignIn/afterSignUp URL when user is already signed in without showing the 'You are signed in' message.",
      optional: true,
      default: "false"
    },
    {
      name: "noPasswordRepeat",
      type: "boolean",
      description: "If true, removes the password confirmation field.",
      optional: true,
      default: "false"
    },
    {
      name: "extraInfo",
      type: "React.ReactNode",
      description: "Additional information to display on the sign-up page.",
      optional: true
    },
    {
      name: "firstTab",
      type: "'magic-link' | 'password'",
      description: "Determines which tab is initially active. Defaults to 'magic-link' if not specified.",
      optional: true
    }
  ]}
/>

## Example

```tsx
import { SignUp } from '@stackframe/stack';

export default function Page() {
  return (
    <div>
      <h1>Sign Up</h1>
      <SignUp
        fullPage={true}
        automaticRedirect={true}
        firstTab='password'
        extraInfo={<>By signing up, you agree to our <a href="/terms">Terms</a></>}
      />
    </div>
  );
}
```
